<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0,">
    <meta charset="UTF-8">
    <title>DPR</title>
    <script>
        /**
         *
         * 这个方法返回一个矩形对象，包含四个属性：left、top、right和bottom。分别表示元素各边与页面上边和左边的距离。

         var box=document.getElementById('box');         // 获取元素

         alert(box.getBoundingClientRect().top);         // 元素上边距离页面上边的距离

         alert(box.getBoundingClientRect().right);       // 元素右边距离页面左边的距离

         alert(box.getBoundingClientRect().bottom);      // 元素下边距离页面上边的距离

         alert(box.getBoundingClientRect().left);        // 元素左边距离页面左边的距离
         DPR:像素比=物理像素/css像素。

         设备像素，（屏幕分辨率）
         又叫物理像素,是显示屏能够控制的最小显示单位.

         css像素=设备独立像素
         就是css上用的像素: border: 1px solid black; 它是web编程抽象的概念,不存在的, 它独立于设备, 用于在逻辑上衡量像素

         设备独立像素
         也叫密度无关像素
         用于独立于设备,用于逻辑上衡量像素的单位, 也就是css像素, 可转换为物理像素。通过DPR修改
         所以说，物理像素和设备独立像素之间存在着一定的对应关系。

         PPI
         像素密度（pixel density）.
         全称是（pixel per inch）就是每英寸内有多少个设备像素点.
         PPI的值越高，画质越好，也就是越细腻，看起来更有逼格。
         标准的PPI是160, 不过现在屏幕标准的少了, 都超过了160.
         PPI 值超过300的叫做超高密度屏幕，Apple 给它换了个高大尚的名称：Retina视网膜屏幕
         Iphone 5s 设备像素比为2
         * */
        var html=document.querySelector('html');
        var width=html.getBoundingClientRect().width;
        html.style.fontSize= width/10 +"px";
        window.addEventListener('orientationchange',function (e) {
            alert(window.orientation);
        })
    </script>
</head>
<body>
<section>
    <ul>
        <li><a href=""><img src="images/page2-img9.jpg" alt=""><span>生鲜</span></a></li>
        <li><a href=""><img src="images/page2-img9.jpg" alt=""><span>果蔬</span></a></li>
        <li><a href=""><img src="images/page2-img9.jpg" alt=""><span>果蔬</span></a></li>
        <li><a href=""><img src="images/page2-img9.jpg" alt=""><span>果蔬</span></a></li>
        <li><a href=""><img src="images/page2-img9.jpg" alt=""><span>果蔬</span></a></li>
    </ul>
</section>
</body>
</html>